<template>
  <div>
     <div :style="{ height: setting.options.height + 'px' }" :id="id"></div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

  import { getGuid } from '@/utils/util'
  import { Liquid } from '@antv/g2plot'
  export default {
    name: 'G2Pie',
    props: ['setting'],
    data() {
      return {
        id: getGuid(),
      }
    },
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      var that = this
      if (that.setting !== undefined && that.setting.data !== undefined) {
        const liquidPlot = new Liquid(this.id, {
          percent: that.setting.data,
          autoFit: true,
          shape: 'diamond',
          outline: {
            border: 4,
            distance: 8,
          },
          wave: {
            length: 128,
          },
        })

        liquidPlot.render()
      } else {
        const liquidPlot = new Liquid(this.id, {
          percent: 0.25,
          autoFit: true,
          shape: 'diamond',
          outline: {
            border: 4,
            distance: 8,
          },
          wave: {
            length: 128,
          },
        })

        liquidPlot.render()
      }
    },
  }
</script>
